<template>
<div>
  <el-table
    :data="tableData"
    border
    style="margin: 0 350px;width: 50.4%">
    <el-table-column
      prop="userName"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="userTel"
      label="电话"
      width="200">
    </el-table-column>
    <el-table-column
      prop="userEmail"
      label="邮箱"
      width="200"
      >
    </el-table-column>
    <el-table-column
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" style="color:green;width:45px" type="text" size="small">角色分配</el-button>
        <el-button @click="handleDelete(scope.row)" type="text" size="small"  style="color:red;width:30px">删除</el-button>
        <el-button @click="handleUpdate(scope.row)" type="text" size="small" style="width:30px">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <Pager 
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handleNewPage"
  ></Pager>
  <div>
    <el-select v-model="value" placeholder="请选择查询方式" style="margin-left:300px">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
    <el-input v-model="input" placeholder="请输入内容" style="width:20%;margin-left:5px"></el-input>
     <el-button @click="queryUser" type="success" style="margin-left:5px">查询</el-button>
  </div>
  <div>
      <router-link :to="{name:'AddUser'}">
        <el-button type="success" style="margin-left:300px;margin-top:10px" >添加用户</el-button>
      </router-link>
  </div>
</div>
</template>

<script>
import {getUserList} from '../services/UserService.js'
import {deleteUser} from '../services/UserService.js'
import {queryUser} from '../services/UserService.js'
import Pager from '../components/Pager'
export default {
  components:{
    Pager,
  },
    inject:['reload']
  ,
    async created(){
        var resp = await getUserList(this.page,this.limit);
        this.tableData = resp.list;
        this.total = resp.total;
    },
     methods: {
       async queryUser(){
          if(this.value == ""){
            alert("请选择查询方式")
            return;
          }
          this.$router.push({
            query: {
            page: 1,
          },
          }); 
          var resp = await queryUser(this.value,this.input,this.page,this.limit);
          this.tableData = resp.data.list;
          this.total = resp.data.total
          
          
       }
       ,
      handleClick(row) {
        this.$router.push({name:"RoleDistribution",params:row});
      },
      handleUpdate(row){
        this.$router.push({name:'UpdateUser'
        ,params:row});
      },
      handleDelete(row) {
        this.$confirm("你确定要删除该用户的信息吗？",{
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }).then((resp)=>{
          if(resp == "confirm"){
            deleteUser(row.userId)  .then((res) =>{
              if(res.data == "true"){
                this.reload();
                alert("删除成功");
              }else {
                alert("删除失败,服务器正忙");
              }
          })
          }
         
        }).catch(err => err)
      },
      async handleNewPage(newPage) {

      this.$router.push({
        query: {
          page: newPage,
        },
      }); 

      var resp = await getUserList(this.page,this.limit);
      this.tableData = resp.list;
      this.total = resp.total;
    }
    },
    data() {
      return {
      tableData: [],
      limit: 5,
      total: 0,
      panelNumber: 10,
      input:'',
      options: [{
          value: '用户名',
          label: '用户名'
        }, {
          value: '电话号码',
          label: '电话号码'
        }],
        value: ''
      }
    },
    computed:{
      page(){
        return +this.$route.query.page || 1;
      }
    }
}
</script>

<style>

</style>